<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link>
            |
            <router-link to="/about">About</router-link>
            |
            <router-link to="/storeTest">Store Test</router-link>
            |
            <router-link to="/login">Login</router-link>
            |
            {{pp}}
            |
            <router-link to="/img">Img</router-link>

            <p/>

            <!--<img width="100" height="100" src=""/>-->
        </div>
        <transition name="fade" mode="out-in">
            <router-view/>
        </transition>
    </div>
</template>

<script>
  if (!window.localStorage) {
    alert("很遗憾，浏览器支持不localstorage");
  } else {
    // alert("浏览器支持localstorage");
    localStorage.setItem("xxx", "123");
    let jj = {x: '1', y: '2'};
    localStorage.setItem("jj", JSON.stringify(jj));
    console.log('存入缓存');
    console.log(JSON.stringify(jj));
    console.log('-------------');
    let ss = localStorage.getItem("jj");
    console.log('从缓存中获取');
    console.log(JSON.parse(ss));
  }

  export default {
    name: 'app',
    data() {
      return {pp: localStorage.getItem('xxx')}
    }
  }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;
    }

    #nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    #nav a.router-link-exact-active {
        color: #42b983;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .4s;
    }

    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
</style>
